<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自定义style</title>
		<script src="js/vue.js"></script>
	</head>
	<style>
		#app div{
			margin: 20px auto;
		}
		#app{
			text-align:center;
		}
		input,select{
			height:40px;
			width: 80px;
			font-size:18px;
			margin: 10px 0;
		}
	</style>
	<body>
		<div id="app">
			宽度：<input v-model="w" type="number">px  <br>
			高度：<input v-model="h" type="number">px  <br>
			背景：<input v-model="bg" type="color"> <br>
			边框：
			宽度：<input v-model="bd_w" type="number">px
			类型：<select v-model="bd_style">
				<option value="solid">实线</option>
				<option value="double">双实线</option>
				<option value="dashed">虚线</option>
				<option value="dotted">点线</option>
				</select>
			颜色：<input v-model="bd_color" type="color"> <br>
			圆角半径：0%<input v-model="radius[0]" type="range" min="0" max="50">50%
			         0%<input v-model="radius[1]" type="range" min="0" max="50">50% <br>
			         0%<input v-model="radius[2]" type="range" min="0" max="50">50%
			         0%<input v-model="radius[3]" type="range" min="0" max="50">50%
			<div :style="{
				width:w+'px',
				height:h+'px',
				background:bg,
				border:bd_w+'px '+bd_style+' '+bd_color,
				borderRadius:radius[0]+'% '+radius[1]+'% '+radius[2]+'% '+radius[3]+'%'
			}"></div>
		</div>
		<script>
			Vue.createApp({
				data(){
					return{
						w:200,
						h:200,
						bg:'#7ff0a7',
						bd_w:0,
						bd_style:'',
						bd_color:'',
						radius:[0,0,0,0]
					}
				}
			}).mount("#app")
		</script>
	</body>
</html> 